<template>
    <section>
      <div class="movie_list" ref="movieList" style="border-top: 1px solid #999999;margin: 5px 140px;">
        <div v-if="videoList.length != 0">
          <div v-for="(item,index) in videoList" :key="index" class="movie_item">
            <el-tooltip class="item" effect="dark" :content="item.v_introduction" placement="left">
              <div class="img_item"  @click="toVideoMsg(item.v_id)">
                <!--              <img :src="item.v_cover" class="movie_img"/>-->
                <el-image :src="item.v_cover" class="movie_img"  lazy>
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <i class="el-icon-caret-right" style="position: relative;top: -200px;"></i>
              </div>
            </el-tooltip>
            <div class="movie_name">
              {{item.v_title}}
            </div>
          </div>
        </div>
        <div v-else style="color: #fff;line-height: 350px;">
          没有搜索到内容
        </div>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="20"
        :current-page="page"
        @current-change="handleCurrentChange"
        style="margin-top: 20px;">
      </el-pagination>
    </section>
</template>

<script>
    import {getTypeVideoByID, getVideoByName} from "../../axios/api"
    export default {
        name: "videoList",
        inject:['setTitle'],
        data(){
            return{
                videoList: [],
                total:0,
                page:1
            };
        },
        mounted() {
            if(this.getUrlKey("id")){
                this.setTitle();
                this.getTypeVideoByID(this.page, 20, this.getUrlKey("id"))
            }else{
                this.getVideoByName(this.page, 20, this.getUrlKey("name"))
            }
        },
        methods:{
            getPageName: function (){
                return "videoList";
            },
            toVideoMsg:function (id) {
                this.$router.push({ path:'/videoMsg?id='+id})
            },
            getTypeVideoByID: async function(page, num, id){
                let data = {
                    id: id,
                    page: page,
                    num: num
                }
                let res = await getTypeVideoByID(data);
                this.videoList = res.msg;
                this.total = res.count;
                this.setHeight(res.msg.length);
                this.page = page;
            },
            getVideoByName: async function(page, num, name){
                let data = {
                    name: name,
                    page: page,
                    num: num
                }
                let res = await getVideoByName(data);
                this.videoList = res.msg;
                this.total = res.count;
                this.setHeight(res.msg.length);
                this.page = page;
            },
            setHeight:function(num){
                if (num <= 5){
                    this.$refs.movieList.style.height = '350px';
                }else if (num > 5 && num <= 10){
                    this.$refs.movieList.style.height = '700px';
                }else if (num > 10 && num <= 15){
                    this.$refs.movieList.style.height = '1050px';
                }else if (num > 15 && num <= 20){
                    this.$refs.movieList.style.height = '1400px';
                }
            },
            handleCurrentChange:function (val) {
                if(this.getUrlKey("id")){
                    this.getTypeVideoByID(val, 20, this.getUrlKey("id"))
                }else{
                    this.getVideoByName(val, 20, this.getUrlKey("name"))
                }
            }
        }
    }
</script>

<style>

  .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #262c35;
  }
  .el-pagination.is-background .el-pager li:not(.disabled):hover{
    color: #d88930;
  }
  .movie_list{
    /*height: 1400px;*/
  }


  .movie_item:hover img{
    transform: scale(1.2);
  }

  .movie_item{
    width: 20%;
    height: 300px;
    float: left;
    margin-top: 40px;
  }

  .movie_img img{
    width: 200px;
    height: 300px;
    border-radius: 5px;
    transition: 0.9s;
  }

  .img_item{
    width: 100%;
    text-align: center;
    color: #0000;
    height: 300px;
    font-size: 60px;
    float: left;
  }
  .image-slot{
    width: 200px;
    height: 300px;
    border-radius: 5px;
    font-size: 20px;
    line-height: 300px;
    color: #C0C4CC;
    background-color: #F5F7FA;
  }
  .el-image__error{
    width: 200px!important;
    width: 100%;
    height: 300px;
    border-radius: 5px;
  }

  .img_item:hover{
    color: #fff;
    transition: 0.9s;
  }

  .movie_name{
    color: white;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
  }

  .el-tooltip__popper{
    white-space: pre-line;
    width: 300px;
    height: 300px;
    overflow: hidden;
    text-overflow:ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 22;
  }
</style>
